<template>
  <div>

    <div px-16rpx v-if="isShow">
      <div v-if="bargainedList.length">
        <div my-20rpx overflow-hidden p-32rpx v-for="(item, orderIndex) in bargainedList" :key="orderIndex" rounded-24rpx
          bg-white>
          <div mb-20rpx text-24rpx flex flex-a-c flex-j-sb>
            <div color-warmGray>{{ item.createTime }}</div>
            <div font-bold
              :class="[item.status === 'START' || item.status === 'SUCCESS' ? 'text-main-color' : 'color-black']">{{
                statusWay[item.status] }}</div>
          </div>
          <column :res="item" :image="item.thumbnail">
            <template #body>
              <div flex>
                <div>
                  还剩<span ml-8rpx text-main-color text-40rpx font-bold>{{ unitPrice(item.surplusPrice, '￥') }}</span>
                </div>

              </div>
            </template>
            <template #footer>
              <div flex mt-20rpx justify-end>
                <nut-button type="primary" plain @click="navigateToBargainDetail(item)">
                  继续免费领
                </nut-button>
              </div>
            </template>
          </column>
        </div>
      </div>
      <div v-else mt-100rpx>
        <empty text="暂无砍价记录" />
      </div>
    </div>
    <!-- 加载 -->
    <nut-toast ref="toastRef" />
  </div>
</template>

<script setup lang="ts">
import { getBargainedList } from '@/api/promotion';
import empty from '@/components/empty/index.vue';
import column from '@/components/goods-list/column.vue';
import type { Search } from '@/constants/types';
import { unitPrice } from '@/utils/filters';
import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
import type { ToastInst } from 'nutui-uniapp';
const isShow = ref(false)
const statusWay: any = {
  START: "砍价中",
  FAIL: "砍价失败",
  SUCCESS: "砍价成功",
  END: "活动结束",
}
const orderType = ref<string>('ALL')

const toastRef = ref<ToastInst>()
const searchForm = ref<Search>({
  pageNumber: 1,
  pageSize: 20,
})
const orderData = ref<any>('')
const bargainedList = ref<any>([])


watch(() => orderType.value, (val) => {
  searchForm.value.tag = val
  init()
})



// 跳转到砍价详情
function navigateToBargainDetail(val: any) {
  uni.navigateTo({
    url: `/pages/promotions/bargain/detail?id=${val.kanjiaActivityGoodsId}`,
  });
};


async function init() {
  isShow.value = false
  bargainedList.value = []
  searchForm.value.pageNumber = 1
  await fetch()
}



async function fetch() {
  uni.stopPullDownRefresh();

  const res = await getBargainedList(searchForm.value)
  isShow.value = true
  if (res.data.success) {
    orderData.value = res.data.result
    bargainedList.value.push(...res.data.result.records)
  }
}
onPullDownRefresh(() => {
  init()
})

onReachBottom(() => {
  if (orderData.value?.total > searchForm.value.pageNumber * searchForm.value.pageSize) {
    searchForm.value.pageNumber++;
    fetch()
  }
})

onMounted(() => {

  init()
})
</script>

<style scoped lang="scss">
</style>
